<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码验证</title>
    <style>
        #inputCaptcha {
            height: 30px;
            vertical-align: middle;
        }

        #verificationCodeImg {
            vertical-align: middle;
        }

        #checkCaptcha {
            height: 40px;
            width: 100px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
<h1>输入验证码</h1>
<div id="confirm">
    <input type="text" name="inputCaptcha" id="inputCaptcha">
    <img id="verificationCodeImg" src="/captcha/getCaptcha" style="cursor: pointer;" title="看不清？换一张" />
    <input type="button" value="提交" id="checkCaptcha">
</div>
<script>
    $(document).ready(function () {
        $("#verificationCodeImg").click(function () {
            $(this).hide().attr('src', '/captcha/getCaptcha?dt=' + new Date().getTime()).fadeIn();
        });

        $("#checkCaptcha").click(function () {
            var captcha = $("#inputCaptcha").val();
            if (captcha === "") {
                alert("请输入验证码");
                return;
            }
            $.ajax({
                type: "post",
                url: "/captcha/check",
                data: {
                    captcha: captcha
                },
                success: function (result) {
                    if (result) {
                        alert("验证码验证成功！");
                    } else {
                        alert("验证码错误，请重新输入");
                    }
                },
                error: function () {
                    alert("请求失败，请稍后重试");
                }
            });
        });
    });
</script>
</body>
</html>